<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:common="http://www.contact.common.com/contacts/ui"
        >

<!--@elvariable id="id" type="java.lang.String"-->
<ui:component>
    <h:panelGrid style="background:inherit" columns="1">
        <h:panelGroup style="float:left;" layout="block">
            <h:panelGroup style="float:left">
                <h:outputLabel value="#{resources.telephoneLabel}:"/>
            </h:panelGroup>
            <h:panelGroup style="margin-left:5px">
                <a4j:commandButton image="./style/images/add.PNG"
                                   action="#{contactInformation.addNewTelephoneRow}"
                                   reRender="#{id}richTableForTelephone">
                    <rich:toolTip direction="bottom-right" value="Add"/>
                </a4j:commandButton>

                <!--<a4j:commandLink value="Add"-->
                <!--action="#{contactInformation.addNewTelephoneRow}"-->
                <!--reRender="#{id}richTableForTelephone">-->
                <!--</a4j:commandLink>-->
            </h:panelGroup>
        </h:panelGroup>
        <h:panelGroup id="#{id}richTableForTelephone"
                      rendered="#{not empty contactInformationSessionBean.allTelephones}"
                      layout="block"
                      style="float:left;">
            <rich:dataTable style="background:inherit" cellpadding="0"
                            value="#{contactInformationSessionBean.allTelephones}" var="data">


                <rich:column>
                    <!--<f:facet name="header">-->
                    <!--<h:outputLabel value="Number"/>-->
                    <!--</f:facet>-->

                    <h:panelGrid columns="4">
                        <h:panelGroup style="width:50px;" layout="block">
                            <h:outputLabel value="#{resources.numberLabel}"/>
                        </h:panelGroup>

                        <h:panelGrid columns="1">
                            <h:panelGroup layout="block" style="width:150px; ">
                                <h:inputText value="#{data.telephone.number}"/>
                            </h:panelGroup>

                        </h:panelGrid>

                        <rich:comboBox value="#{data.telephone.kindId}"
                                       enableManualInput="false"
                                       selectFirstOnUpdate="false"
                                       defaultLabel="#{data.telephone.kindId}"
                                       width="60px">
                            <f:selectItems value="#{contactInformation.telephonesKinds}"/>
                        </rich:comboBox>
                         <a4j:commandButton rendered="#{data.existsRemoveLink}"
                                         image="./style/images/remove.PNG"
                                         action="#{contactInformation.removeTelephoneRow}"
                                         reRender="#{id}richTableForTelephone">
                              <rich:toolTip direction="bottom-right" value="#{resources.removeLabel}"/>
                            <f:param value="#{data.index}" name="telephoneIndex"/>
                        </a4j:commandButton>

                        <!--<a4j:commandLink rendered="#{data.existsRemoveLink}"-->
                                         <!--value="Remove"-->
                                         <!--action="#{contactInformation.removeTelephoneRow}"-->
                                         <!--reRender="#{id}richTableForTelephone">-->
                            <!--<f:param value="#{data.index}" name="telephoneIndex"/>-->
                        <!--</a4j:commandLink>-->
                    </h:panelGrid>

                    <h:panelGrid columns="2">
                        <h:panelGroup layout="block" style="width:51px"/>
                        <h:panelGroup rendered="#{not data.detailed}" layout="block" style="width:150px; ">
                            <a4j:commandLink value="#{resources.detailedLabel}"
                                             action="#{contactInformation.detailedTelephone}"
                                             reRender="#{id}richTableForTelephone">
                                <f:param value="#{data.index}" name="telephoneIndex"/>
                            </a4j:commandLink>
                        </h:panelGroup>
                        <h:panelGroup rendered="#{ data.detailed}" layout="block" style="width:150px; ">
                            <h:panelGrid columns="1">
                                <h:outputLabel value="#{resources.describeLabel}"/>
                                <h:inputTextarea rows="3" cols="15" value="#{data.telephone.description}"/>
                                <a4j:commandLink value="#{resources.hideLabel}"
                                                 action="#{contactInformation.hideDetailedTelephone}"
                                                 reRender="#{id}richTableForTelephone">
                                    <f:param value="#{data.index}" name="telephoneIndex"/>
                                </a4j:commandLink>
                            </h:panelGrid>

                        </h:panelGroup>
                    </h:panelGrid>

                </rich:column>
                <!--<rich:column>-->
                <!--<f:facet name="header">-->
                <!--<h:outputLabel value="Kind"/>-->
                <!--</f:facet>-->

                <!---->
                <!--</rich:column>-->

                <!--<rich:column>-->
                <!--<f:facet name="header">-->
                <!--<h:outputLabel value="Operation"/>-->
                <!--</f:facet>-->
                <!---->
                <!--</rich:column>-->


            </rich:dataTable>
        </h:panelGroup>
    </h:panelGrid>

</ui:component>


</html>
